<#include "/common/taglibs.ftl" />
<@menu code='${entityName!}'/>
<title><@spring.message code="${entityName!}" /> - <@spring.message code="list" /></title>
<div class="m-portlet m-portlet--mobile m-portlet--tabs">
    <div class="m-portlet__head">
        <div class="m-portlet__head-caption">
            <div class="m-portlet__head-title">
                <h3 class="m-portlet__head-text">
                    <@spring.message code="${entityName!}"/> 11${RequestParameters['view']!}
                </h3>
            </div>
        </div>
        <div class="m-portlet__head-tools">
            <#include "/showcase/crud/sample/tabs.ftl" />
        </div>
    </div>
    <div class="m-portlet__body">
        <div class="table-container">
            <@tableHeaderButtons resourceIdentity='${resourceIdentity!}'>
                <button class="btn btn-sm btn-secondary m-btn m-btn--icon btn-chart"><i class="la la-bar-chart"></i> 报表</button>
                <div class="btn-group-items">
                    <button class="dropdown-item btn-chart1" type="button"><i class="la la-bar-chart"></i> 报表1</button>
                    <button class="dropdown-item btn-chart2" type="button"><i class="la la-bar-chart"></i> 报表2</button>
                    <div class="dropdown-divider"></div>
                </div>
            </@tableHeaderButtons>
            <@tableColumnButtons resourceIdentity='${resourceIdentity!}'>
                <#--<button class="btn btn-sm btn-outline-brand m-btn m-btn--icon m-btn--pill btn-chart"><i class="la la-bar-chart"></i> 报表</button>-->
            </@tableColumnButtons>
            <table class="table table-striped- table-bordered table-hover table-checkable dataTable dtr-inline" id="datatable"
                   data-datatable="true"
                   data-datatable-advance-search="show"
                   data-datatable-draw-callback="drawCallback"
                   data-datatable-quick-search-filter="search_LIKE_name_OR_email"
            >
                <thead>
                    <tr role="row" class="heading">
                        <th width="1%" data-checkable="true" data-orderable="false"></th>
                        <th width="5%" data-data="id" data-searchable="false"> ID# </th>
                        <th width="5%" data-data="name"> <@spring.message code="sample.name"/> </th>
                        <th width="8%" data-data="gender" data-render="renderGender" data-search-type="<@searchTypeSelect items=genders/>"> <@spring.message code="sample.gender"/> </th>
                        <th data-data="email"> <@spring.message code="sample.email"/> </th>
                        <th width="8%" data-data="activated" data-render="renderBoolean" data-search-type="<@searchTypeSelectBoolean/>"> <@spring.message code="activated"/> </th>
                        <th width="5%" class="center" data-data="age" data-search-type="range" > <@spring.message code="sample.age"/> </th>
                        <th width="5%" class="center" data-data="salary" data-search-type="range" > <@spring.message code="sample.salary"/> </th>
                        <th width="10%" class="center" data-data="birthday" data-search-type="daterange" data-render="renderDate"> <@spring.message code="sample.birthday"/> </th>
                        <th width="15%" class="center" data-data="lastModifiedDate" data-search-type="daterange" data-render="renderDateTime"> <@spring.message code="lastModifyDate"/> </th>
                        <th width="10%" data-actions="true"> <@spring.message code="action"/> </th>
                    </tr>
                </thead>
                <tbody> </tbody>
            </table>
        </div>
    </div>
</div>

<page-plugin-style>
    <link href="${theme}/assets/vendors/custom/datatables/datatables.bundle.css" rel="stylesheet" type="text/css" />
</page-plugin-style>
<page-style>
</page-style>

<page-plugin-script>
    <script src="${theme}/assets/vendors/custom/datatables/datatables.bundle.js" type="text/javascript"></script>
    <script src="${static}/scripts/m.datatable.js" type="text/javascript"></script>
</page-plugin-script>
<page-script>
    <script>
        function renderGender( data, type, full, meta ){
            if(data=='male'){
                return '<@spring.message code="gender.male"/>';
            } else {
                return '<@spring.message code="gender.female"/>';
            }
        }

        var drawCallback = function(grid, $table){
            console.log('data table draw callback', grid, $table);

            // init normal button
            grid.getTableGroupActions().find(".btn-chart").on('click', function(){
                console.log('Button[.btn-chart] clicked');
            });

            // init action group button
            grid.getTableGroupActions().find(".btn-chart1").on('click', function(){
                console.log('Action Group Button[.btn-chart1] clicked');
            });

            grid.getTableGroupActions().find(".btn-chart2").on('click', function(){
                console.log('Action Group Button[.btn-chart2] clicked');
            });

            $table.find("tbody tr")
            // else
            if(grid.getDataTable().data().length==0) return;
        }

        $('#datatable').on('action.mdt.tool.button', function (e, grid, $table, $button) {
            console.log('action.mdt.tool.button', e, grid, $table, $button)
        }).on('action.mdt.row.button', function (e, grid, $table, $button, rowIndex, rowData) {
            console.log('action.mdt.row.button', e, grid, $table, $button, rowIndex, rowData)
        });
    </script>
</page-script>